<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>个人中心</title>
    <meta name="keywords" content="文乐文" />
    <meta name="description" content="文乐文" />

    <link rel="stylesheet" href="static/css/swiper.min.css" type="text/css" />
    <link rel="stylesheet" href="static/css/bootstrap.css" type="text/css" />
    <link rel="stylesheet" href="static/css/common.css" type="text/css" />
    <link rel="stylesheet" href="static/css/element2.css" />
  </head>

  <body>
    <div id="app" v-cloak>
      <!-- 包含头部 -->
      <div class="header_box">
        <!-- container-fluid -->
        <div class="header container">
          <div class="logo_box">
            <img src="static/picture/logo2.png" />
          </div>
          <div class="nav_box">
            <a href="index.html">
              <div class="item">首页</div>
            </a>
            <a href="goods.html">
              <div class="item">产品中心</div>
            </a>
            <a href="integral.html">
              <div class="item">积分商城</div>
            </a>
            <a href="lease.html">
              <div class="item">进销存ERP</div>
            </a>
            <a href="service.html">
              <div class="item">服务与支持</div>
            </a>
            <a href="my.html">
              <div class="item">个人中心</div>
            </a>
          </div>
          <div class="buy-box">
            <a href="javascript:;" class="tit">购买</a>
            <div class="sub" style="display: none">
              <div class="list">
                <a
                  target="_blank"
                  href="https://mall.jd.com/index-11504190.html?from=pc"
                  >文乐文京东旗舰店</a
                >
              </div>
            </div>
          </div>
          <div class="search_box">
            <input
              name="keyword"
              type="text"
              class="search_input"
              id="header_search_input"
              placeholder="搜索"
            />
            <button id="header_search_btn" class="search_btn"></button>
          </div>
        </div>
      </div>

      <div class="page_order_list container">
        <div class="title">个人中心</div>

        <div class="userInfo">
          <div>
            名称：
            <el-input
              v-if="changeUserInfo"
              v-model="userInfo.nickname"
              size="small"
            ></el-input>
            <span v-else>{{userInfo.nickname}}</span>
            <el-link type="primary" @click="clickchangeUserInfo"
              >{{changeUserInfo?'保存':'修改'}}</el-link
            >
          </div>
          <div>电话：{{userInfo.phone}}</div>
          <div>余额：{{userInfo.nowMoney}}</div>
          <div>积分：{{userInfo.nowMoney}}</div>
          <div>优惠券：{{userInfo.nowMoney}}张</div>
          <div>记账额度：￥{{userInfo.nowMoney}}</div>
          <div><el-button type="primary" size="small">联系客服</el-button></div>
          <div>
            <el-button type="primary" size="small" @click="toKaiPiao">开票信息管理</el-button>
            <el-button type="primary" size="small" @click="toEditAddress"
              >收货地址管理</el-button
            >
          </div>
        </div>
      </div>

      <!-- 包含公共底部文件 -->
      <div class="footer">
        <div class="footer_box container">
          <div class="contact_box col-sm-4 f-cb">
            <div class="dtitle">服务/Service</div>
            <div class="tel_box">
              <p class="title">全国统一热线电话</p>
              <p class="tel">0574-58974484</p>
            </div>
            <div class="mail_box">
              <p class="title">服务邮箱</p>
              <p class="mail">598292588@qq.com</p>
            </div>
          </div>
          <div class="nav_list col-sm-4 f-cb">
            <div class="dtitle">导航/Navigation</div>
            <ul class="nav_box">
              <li><a href="about.html">关于我们</a></li>
              <li><a href="">商品中心</a></li>
              <li><a href="lease.html">打印机租赁</a></li>
              <li><a href="service.html">服务与支持</a></li>
              <li><a href="contact.html">联系我们</a></li>
            </ul>
          </div>
          <div class="search col-sm-4 f-cb">
            <div class="dtitle">产品中心/Product center</div>
            <div class="search_box">
              <input class="search_input" name="keyword" placeholder="搜索" />
              <!-- <button class="btn btn-primary jd_btn" type="button">京东商城</button>-->
              <a
                class="btn btn-primary jd_btn"
                target="_blank"
                href="https://mall.jd.com/index-11504190.html?from=pc"
                >京东商城</a
              >
            </div>
            <div class="wechat_box">
              <div class="item">
                <img src="static/picture/wechat.svg" />
              </div>
              <div class="item">
                <img src="static/picture/weibo.svg" />
              </div>
            </div>
          </div>
        </div>

        <div class="site_info container">
          Copyright ©2020 宁波文乐文科技有限公司 版权所有
          <a href="https://beian.miit.gov.cn/#/Integrated/index"
            >浙ICP备2020041669号-1</a
          >
        </div>
      </div>
    </div>

    <script src="static/js/vue2.js"></script>
    <script src="static/js/element2.js"></script>
    <script src="static/js/jquery.js"></script>
    <script src="static/js/common.js"></script>
  </body>
</html>

<script>
  var app = new Vue({
    el: "#app",
    data: {
      userInfo: {},
      changeUserInfo: false,
    },
    created() {
      var token = localStorage.getItem("token")
        ? localStorage.getItem("token")
        : "";

      if (!token) {
        this.$message.error("请先登录");
        setTimeout(() => {
          window.location.href = "./index.html";
        }, 1500);
      }

      this.getData();
    },
    methods: {
      getData() {
        $.ajax({
          url: apiurl + "/api/front/user",
          headers: {
            "Content-Type": "application/json",
            "Authori-zation": localStorage.getItem("token")
              ? localStorage.getItem("token")
              : "",
          },
          success: (res) => {
            this.userInfo = res.data;
          },
        });
      },
      clickchangeUserInfo() {
        if (!this.changeUserInfo) {
          this.changeUserInfo = true;
        } else {
          $.ajax({
            url: apiurl + "/api/front/user/edit",
            data: JSON.stringify({ nickname: this.userInfo.nickname }),
            type: "POST",
            headers: {
              "Content-Type": "application/json",
              "Authori-zation": localStorage.getItem("token")
                ? localStorage.getItem("token")
                : "",
            },
            success: (res) => {
              if (res.code == 200) {
                this.$message.success("修改成功");
                this.changeUserInfo = false;
              } else {
                this.$message.error(res.message);
              }
            },
          });
        }
      },
      toEditAddress() {
        window.location.href = "./address.html";
      },
      toKaiPiao() {
        window.location.href = "./kaipiao.html";
      },
    },
  });
</script>

<style>
  .userInfo {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 40px;
  }
  .userInfo div {
    font-size: 17px;
    width: 50%;
    display: inline-block;
    margin-bottom: 10px;
  }
</style>
